<template>
  <div class="template-appointmentOfInspectorsForm-Lu">
    <a-modal
      title="审评员解聘"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      :footer="false"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-appointmentOfInspectorsModalDj-Lu"
      @cancel="closeVisible">
      <div style="height: calc(100vh - 125px);">
        <a-steps :current="current" style="width: 50%;margin: 0 auto;">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <a-form layout="inline" class="personal-info-form" :form="form" v-if="increaseVisible" :key="formKey">
          <div v-if="current == 0" class="steps-content">
            <a-tabs type="card" @change="callback">
              <a-tab-pane key="1" tab="解聘信息">
                <a-collapse v-model="activeKey" :expand-icon-position="expandIconPosition" @change="collapseChange">
                  <a-collapse-panel key="1" header="解聘登记">
                    <a-descriptions bordered style="width: 100%;" :column="4" class="descriptions-dengji">
                      <a-descriptions-item :span="2">
                              <span slot="label" class="descriptions-label-slot">
                                  <span class="xhText" >*</span>
                                  解聘文号
                              </span>
                              <a-form-item ref="fjpwh" prop="fjpwh">
                                  <a-input
                                      v-model="fromState.fjpwh"
                                      placeholder="请输入解聘文号"
                                      v-decorator="[ 'fjpwh', {initialValue:fromState.fjpwh,rules: rules.fjpwh}]"
                                  />
                              </a-form-item>
                              <span style="margin-left: 10px;line-height: 3.5;">
                                <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" :showUploadList="false" action="" @change="uploadClick">
                                  <span class="xhText" >*</span>
                                  <a-button class="blue-btn">选择文件<span style="color: red;">(仅限PDF)</span></a-button>
                                </a-upload>
                                  <a href="#" style="margin-left: 5px;" v-if="fromState.fjpfjdz" @click="downloadPdf(fromState.fjpfjdz)">{{fileName}}</a>
                                  <span style="margin-left: 5px;" v-else>{{fileName}}</span>
                              </span>
                          </a-descriptions-item>
                          <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                              <span class="xhText" >*</span>
                                解聘时间
                            </span>
                            <a-form-item>
                                <a-date-picker format="YYYY-MM-DD" @change="fjpsjChange"
                                v-decorator="[ 'fjpsj', {initialValue:fromState.fjpsj,rules: rules.fjpsj}]"/>
                            </a-form-item>
                          </a-descriptions-item>
                          <a-descriptions-item>
                              <span slot="label" class="descriptions-label-slot">
                                  <span class="xhText" >*</span>
                                  解聘人数
                              </span>
                              <a-form-item prop="fjprs">
                                <a-input-number placeholder="请输入解聘人数"
                                style="width: 180px"
                                @change="fjprsChange"
                                v-decorator="[ 'fjprs', {initialValue:fromState.fjprs,rules: rules.fjprs}]"/>
                              </a-form-item>
                          </a-descriptions-item>
                          <a-descriptions-item :span="2">
                            <span slot="label" class="descriptions-label-slot">
                              <span class="xhText" >*</span>
                              解聘原因
                            </span>
                            <a-form-item style="width: 100%;" class="descriptions-content-item">
                              <a-textarea placeholder="请输入解聘原因" v-model="fromState.fjply" :auto-size="{ minRows: 2}"
                              v-decorator="[ 'fjply', {initialValue:fromState.fjply,rules: rules.fjply}]"/>
                            </a-form-item>
                          </a-descriptions-item>
                          <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                              <span class="xhText" >*</span>
                              退休年龄-男职工
                            </span>
                            <a-form-item>
                              <a-input-number
                                id="inputNumbernzg"
                                style="width: 180px"
                                v-model="fromState.fmaletxnl"
                                :min="0" :precision="0"
                                placeholder="请输入男职工退休年龄"/>
                            </a-form-item>
                          </a-descriptions-item>
                          <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                              <span class="xhText" >*</span>
                              退休年龄-女职工
                            </span>
                            <a-form-item>
                              <a-input-number
                                id="inputNumbermnzg"
                                style="width: 180px"
                                v-model="fromState.ffemaletxnl"
                                :min="0" :precision="0"
                                placeholder="请输入女职工退休年龄"/>
                            </a-form-item>
                          </a-descriptions-item>
                    </a-descriptions>
                    <div style="text-align: center;margin-top: 10px;">
                      <a-button class="blue-btn" @click="saveClick()">
                          暂存
                      </a-button>
                      <a-button :loading="loading" class="blue-btn" style="margin-left: 10px;" @click="createTableClick">
                          生成列表
                      </a-button>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
                <div class="commpVxeTable-table">
                  <h1 style="text-align: center;margin-bottom: 0;">拟解聘名单</h1>
                  <commpVxeTable
                    :key="reCommpVxeTable"
                    :occupancyHeight="FirstContentHeight"
                    :conditionBtnRow="true"
                    :config="dataTableConfig"
                    :columns="columnsVxe"
                    :formItem="formItem"
                    @checkboxChange="checkboxChange"
                    ref="administrativeOffice"
                    @searchEvent="searchEvent"
                    @resetEvent="resetEvent"
                    >
                    <template v-slot:externalOperations="{data}">
                      <vxe-form-item>
                        <template>
                          <a-button class="blue-btn" @click="addManClick" icon="plus">手动添加</a-button>
                        </template>
                      </vxe-form-item>
                      <vxe-form-item>
                        <template>
                          <a-button class="blue-btn" @click="exportClick('拟解聘名单')" icon="export">导出</a-button>
                        </template>
                      </vxe-form-item>
                      <vxe-form-item>
                        <template>
                          <a-button class="red-btn" @click="deleteClick" icon="delete">移出名单</a-button>
                        </template>
                      </vxe-form-item>
                    </template>
                    <template v-slot:operation_realname="{row}" data-desc="姓名">
                      <span style="padding-right: 21;" v-if="row.realname&&row.realname.length == 2">
                          <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                              {{trem}}
                              <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                          </span>
                      </span>
                      <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                    </template>
                    <template v-slot:operation_sex="{row}" data-desc="性别">
                      <span v-if="row.sex == 1">男</span>
                      <span v-if="row.sex == 2">女</span>
                    </template>
                  </commpVxeTable>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="事项审批">
                <approvalOfMatters
                    ref="approvalOfMattersRef"
                    :key="approvalOfMattersKey"
                    :conInterface="conInterface">
                    </approvalOfMatters>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div v-if="current == 1" class="steps-content" style="background-color: white;">
            <a-descriptions title="解聘审评员信息" bordered class="view-descriptions" :key="endFormKey">
              <a-descriptions-item label="解聘文号">
                {{ fromState.fjpwh }}
              </a-descriptions-item>
              <a-descriptions-item label="解聘文号附件">
                <a href="#" style="margin-left: 5px;" @click="downloadPdf(fromState.fjpfjdz)">{{fromState.fjpwh}}.pdf</a>
              </a-descriptions-item>
              <a-descriptions-item label="解聘时间">
                {{ moment(fromState.fjpsj).format('YYYY-MM-DD') }}
              </a-descriptions-item>
              <a-descriptions-item label="解聘人数">
                {{ fromState.fjprs }} 人
              </a-descriptions-item>
              <a-descriptions-item label="解聘原因" :span="2">
                {{ fromState.fjply }}
              </a-descriptions-item>
            </a-descriptions>
            <div style="padding: 10px;text-align: right;">
              <a-button class="blue-btn" @click="exportClick('解聘名单')" icon="export">导出</a-button>
            </div>
            <commpVxeTable
                :key="reCommpVxeTable"
                :occupancyHeight="280"
                :conditionBtnRow="true"
                :config="dataTableConfig"
                :columns="columnsVxeGs"
                ref="administrativeOffice"
                >
                <template v-slot:operation_realname="{row}" data-desc="姓名">
                  <span style="padding-right: 21;" v-if="row.realname&&row.realname.length == 2">
                      <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                          {{trem}}
                          <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                      </span>
                  </span>
                  <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                </template>
                <template v-slot:operation_sex="{row}" data-desc="性别">
                  <span v-if="row.sex == 1">男</span>
                  <span v-if="row.sex == 2">女</span>
                </template>
              </commpVxeTable>
          </div>
        </a-form>

      </div>
      <div class="steps-action">
        <a-button
          v-if="current == 0"
          class="blue-btn"
          style="margin-left: 8px"
          @click="next"
        >
          完成
        </a-button>
      </div>
    </a-modal>
    <checkManModal ref="checkManModalRef" @checkManFuntion="checkManFuntion"></checkManModal>
    <handleModal ref="handleModalRef" @resetEvent="resetEventXz"></handleModal>
  </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import compSelector from '@/components/compSelector/compSelector'
import { typeCheckbox } from '@/components/compSearchCriteria/ContractType'
import { saveJpdj,submitJpdj,uploadJpFile,queryJpdjById,jpdjByScyxrymd,jpdjPageList,viewXzswlc,
          jpdjBydelete,exportByJpdj,sddjRymd,dict,queryJcyJpInQrmdLcList,initJcyJpInQrmdlc,
          queryByJodId,deletXzswlc} from './service/index'
import  assessCheckApi  from './service/api'
import checkManModal from './checkManModal'
import handleModal from '../administrativeOffice-new/modal/handleModal.vue'
import moment from 'moment'
import approvalOfMatters from '@/components/approvalOfMatters/approvalOfMatters.vue'
export default {
  components:{
    commpVxeTable,compSelector,checkManModal,handleModal,approvalOfMatters
  },
  data() {
    return {
      increaseVisible: false,
      form: this.$form.createForm(this, { fjpwh: 'appointmentOfInspectorsFrom' }),
      formKey: null,
      endFormKey: null,
      fromState:{
        // fmaletxnl:60,
        // ffemaletxnl:55,
      },
      rules:{
        fjpwh: [{
            required: true,
            message: '请输入解聘文号',
            trigger: 'blur',
        }],
        fjpsj: [{
            type: 'object',
            required: true,
            message: '请选择解聘时间',
            trigger: 'blur',
        }],
        fjply: [{
            required: true,
            message: '请输入解聘原因',
            trigger: 'blur',
        }],
        fjprs: [{
          type: 'number',
            required: true,
            message: '请输入解聘人数',
            trigger: 'blur',
        }],
        fmaletxnl: [{
          type: 'number',
            required: true,
            message: '请输入男职工退休年龄',
            trigger: 'blur',
        }],
        ffemaletxnl: [{
          type: 'number',
            required: true,
            message: '请输入女职工退休年龄',
            trigger: 'blur',
        }],
      },
      moment,
      current: 0,
      steps: [
        {
          title: '解聘登记',
          content: 'First-content',
        },
        {
          title: '完成',
          content: 'Last-content',
        },
      ],
      compSelectorkey:null,
      typeCheckbox:typeCheckbox,
      activeKey: ['1'],
      expandIconPosition: 'right',
      loading: false,
      dateFormat : 'YYYY-MM-DD',
      time: [],
      fileName: '未选择任何文件',
      FirstContentHeight: 310,
      //---
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.jpdjPageList,
        rowId: 'id',
        paramet: {
          id: ''
        }
      },
      reCommpVxeTableLc: '',
      dataTableConfigLc: {
        api: assessCheckApi.queryJcyJpInQrmdLcList,
        rowId: 'id',
        paramet: {
          fjpjbxxid: ''
        }
      },
      columnsVxeLc: [
        {
            title: '环节名称',
            field: 'fhjmc',
        },{
            title: '办理人',
            field: 'fdbr',
            width: 100,
            interval:true,
            slots: {
                default:'operation_fdbr',
            }
        },{
            title: '发送人',
            field: 'ffsrmc',
            width: 100,
            interval:true,
            slots: {
                default:'operation_ffsrmc',
            }
        },{
            title: '发送时间',
            field: 'ffssj',
            width: 150,
        },{
            title: '办理时间',
            field: 'fblsj',
        },{
            title: '办理意见',
            field: 'fblyj',
        },{
            title: '操作',
            field: 'jobid',
            width: 250,
            titleInterval:true,
            slots: {
            // 使用插槽模板渲染
                header:'data3_header',
                default: 'operation_btn',
            },
        }
      ],
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'realname',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data1_header',
              default: 'operation_realname',
          }
        },{
          title: '性别',
          field: 'sex',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data2_header',
              default: 'operation_sex',
          }
        },{
          title: '工作单位',
          field: 'fgzdw',
        },{
          title: '审评类型',
          field: 'fjcyxl',
        },{
          title: '备注',
          field: 'fbz',
        },{
          title: '申请原因',
          field: 'fsqyy',
        }
      ],
      formItem: [
        {
          label: '关键字',
          model: 'gjz',
        }
      ],
      idList: [],
      //---
      columnsVxeGs: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'realname',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data1_header',
              default: 'operation_realname',
          }
        },{
          title: '性别',
          field: 'sex',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data2_header',
              default: 'operation_sex',
          }
        },{
          title: '工作单位',
          field: 'fgzdw',
        },{
          title: '审评员类别',
          field: 'fjcyxl',
        }
      ],
      //==
      approvalOfMattersKey: '',
        conInterface: {
            paramet: {
                fjpjbxxid: '',
            },
            initiateApi: assessCheckApi.initJcyJpInQrmdlc,
            tableApi: assessCheckApi.queryJcyJpInQrmdLcList,
        },
    }
  },
  methods: {
    getData(val,page){
      this.current = page
      this.getdict()
      if(val.id){
        queryJpdjById({id:val.id}).then(res => {
          let data = res.result
          let data1 = {
            id:data.id,
            fjpwh:data.fjpwh,
            fjpfjdz:data.fjpfjdz,
            fjpsj: data.fjpsj?moment(data.fjpsj):null,
            fjprs: data.fjprs,
            fjply: data.fjply,
            fmaletxnl: data.fmaletxnl?data.fmaletxnl:this.fromState.fmaletxnl,
            ffemaletxnl: data.ffemaletxnl?data.ffemaletxnl:this.fromState.ffemaletxnl,
          }
          this.time = [data.fsxkssj,data.fsxjssj]
          this.fileName = data.fjpfjdz?this.fromState.fjpwh?this.fromState.fjpwh+'.pdf':'解聘文书.pdf':'未选择任何文件'
          this.fromState = data1
          this.dataTableConfig.paramet = {
            id: this.fromState.id
          }
          this.reCommpVxeTable = Date.now()
          //console.log('88888888888888',this.fromState)

          this.conInterface.paramet.fjpjbxxid = this.fromState.id

        })
      } else {
        //console.log('9999999999')
        this.fromState = {
          fmaletxnl: this.fromState.fmaletxnl,
          ffemaletxnl: this.fromState.ffemaletxnl,
        }
        this.formKey = Date.now()

        this.conInterface.paramet.fjpjbxxid = this.fromState.id
      }
    },
    getdict(){
      dict("女职工退休年龄").then(res => {
        this.fromState.fmaletxnl = Number(res.result[0].itemValue)
      })
      dict("男职工退休年龄").then(res => {
        this.fromState.ffemaletxnl = Number(res.result[0].itemValue)
      })
      this.formKey = Date.now()
    },
    closeVisible(){
      this.increaseVisible = false
      this.fromState = {}
      this.current = 0
      this.fileName = '未选择任何文件'
      this.loading = false
      this.dataTableConfig.paramet = {
          id: ''
        }
      this.reCommpVxeTable = Date.now()
      this.$emit('success')
    },
    collapseChange(key){
      if(key.length == 0){
        this.FirstContentHeight = 100
      } else {
        this.FirstContentHeight = 310
      }
      this.reCommpVxeTable = Date.now()
      //console.log(this.FirstContentHeight)
    },
    next() {
      // this.getData(this.fromState.id)
      this.subClick()
    },
    prev() {
      // this.current--;
      // this.getData(this.fromState.id)
      this.returnClick()
    },
    downloadPdf(href){
      window.open(href,'_blank')
    },
    fjprsChange(val){
      this.fromState.fjprs = val
    },
    fjpsjChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.fjpsj = date?moment(date):null
      // //console.log(this.fromState.fjpsj)
    },
    fgskssjChange(date, dateString){
      this.fromState.fgskssj = date?moment(date):null
    },
    fgsjssjChange(date, dateString){
      this.fromState.fgsjssj = date?moment(date):null
    },
    onChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.fsxkssj = dateString[0]
      this.fromState.fsxjssj = dateString[1]
      this.time = dateString
      //console.log(this.time)
    },
    fyqjccsChange(e){
      //console.log(e)
      this.fromState.fyqjccs = 5
      //console.log(typeof this.fromState.fyqjccs)
    },
    fprsfChange(e){
      //console.log(e)
    },
    // 附件
    beforeUpload(e){
      return false
    },
    // 上传附件
    async uploadClick({file}){
      //console.log(file)
      if(!this.fromState.id){
        let data = {}
        data = {
          id:'',
          fjpwh:this.fromState.fjpwh,
          fjpsj:this.fromState.fjpsj?moment(this.fromState.fjpsj).format('YYYY-MM-DD'):null,
          fjprs: this.fromState.fjprs,
          fjply:this.fromState.fjply,
          fmaletxnl: this.fromState.fmaletxnl,
          ffemaletxnl: this.fromState.ffemaletxnl,
        }
        const res = await saveJpdj(data)
        if (res.success) {
          this.fromState.id = res.result.id
          this.uploadClicka(file,this.fromState.id)
        }
      } else {
        this.uploadClicka(file,this.fromState.id)
      }
    },
    uploadClicka(file,id){
      //console.log(file)
      var that = this
        if(file.type.indexOf('pdf') == -1){
          that.$message.warning('当前仅限上传PDF，请重新选择！')
          return
        }
        if(typeof file.uid !== 'undefined') {
          const fileData = new FormData();
          fileData.append("file",file);
          fileData.append("id",id);
          //console.log(fileData)
          uploadJpFile(fileData).then(res => {
            //console.log('fileData',res)
            if (res.success) {
              that.$message.success(res.message)
              that.fileName = that.fromState.fjpwh?that.fromState.fjpwh+'.pdf':'解聘文书.pdf'
              that.fromState.fjpfjdz = res.result.fjpfjdz
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {}
    },
    // 暂存
    saveClick(){
      //console.log(this.fromState)
      let data = {}
      data = {
        id:this.fromState.id?this.fromState.id:'',
        fjpwh:this.fromState.fjpwh,
        fjpsj:this.fromState.fjpsj?moment(this.fromState.fjpsj).format('YYYY-MM-DD'):null,
        fjprs: this.fromState.fjprs,
        fjply:this.fromState.fjply,
        fmaletxnl: this.fromState.fmaletxnl,
        ffemaletxnl: this.fromState.ffemaletxnl,
      }
      saveJpdj(data).then(res => {
        if(res.code == 200){
          this.fromState.id = res.result.id
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 下一步
    async subClick(){
      let data = {}
      let data1 = {}
        data1 = {
          id:this.fromState.id?this.fromState.id:'',
          fjpwh:this.fromState.fjpwh,
          fjpsj:this.fromState.fjpsj?moment(this.fromState.fjpsj).format('YYYY-MM-DD'):null,
          fjprs: this.fromState.fjprs,
          fjply:this.fromState.fjply,
          fmaletxnl: this.fromState.fmaletxnl,
          ffemaletxnl: this.fromState.ffemaletxnl,
        }
      let resA = await saveJpdj(data1)
        data = {
          id:this.fromState.id?this.fromState.id:'',
          id:this.fromState.id?this.fromState.id:'',
          fjpwh:this.fromState.fjpwh,
          fjpsj:this.fromState.fjpsj?moment(this.fromState.fjpsj).format('YYYY-MM-DD'):null,
          fjprs: this.fromState.fjprs,
          fjply:this.fromState.fjply,
          fmaletxnl: this.fromState.fmaletxnl,
          ffemaletxnl: this.fromState.ffemaletxnl,
        }
      if(!this.fromState.fjpfjdz){
        this.$message.warning('请上传解聘文书！')
        return
      }
      this.form.validateFields((err, values) => {
          if(!err){
            submitJpdj(data).then(res => {
              if(res.code == 200){
                this.$message.success(res.message)
                this.current++;
                this.endFormKey = Date.now()
                this.reCommpVxeTable = Date.now()
              } else {
                this.$message.warning(res.message)
              }
            })
          }
      })
    },
    // 生成拟任名单
    async createTableClick(){
      this.loading = true
      let data1 = {}
        data1 = {
          id:this.fromState.id?this.fromState.id:'',
          fjpwh:this.fromState.fjpwh,
          fjpsj:this.fromState.fjpsj?moment(this.fromState.fjpsj).format('YYYY-MM-DD'):null,
          fjprs: this.fromState.fjprs,
          fjply:this.fromState.fjply,
          fmaletxnl: this.fromState.fmaletxnl,
          ffemaletxnl: this.fromState.ffemaletxnl,
        }
        const res = await saveJpdj(data1)
        if (res.success) {
          this.fromState.id = res.result.id
          let formD = {}
          formD = {
            id:this.fromState.id?this.fromState.id:'',
            fmaletxnl: this.fromState.fmaletxnl,
            ffemaletxnl: this.fromState.ffemaletxnl,
          }
          jpdjByScyxrymd(formD).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.dataTableConfig.paramet = {
                id: this.fromState.id
              }
              this.reCommpVxeTable = Date.now()
            } else {
              this.$message.warning(res.message)
            }
            this.loading = false
          })
        }
    },
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
          val.forEach(item => {
              this.idList.push(item.id)
          });
      }
    },
    // 搜索
    searchEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 重置
      resetEvent(){
          //console.log('重置')
        //console.log('表格初始化')
          this.reCommpVxeTable = Date.now()
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 手动添加人员
      async addManClick(){
        if(!this.fromState.id){
          let data1 = {}
          data1 = {
            id:this.fromState.id?this.fromState.id:'',
            fjpwh:this.fromState.fjpwh,
            fjpsj:this.fromState.fjpsj?moment(this.fromState.fjpsj).format('YYYY-MM-DD'):null,
            fjprs: this.fromState.fjprs,
            fjply:this.fromState.fjply,
            fmaletxnl: this.fromState.fmaletxnl,
            ffemaletxnl: this.fromState.ffemaletxnl,
          }
          let resA = await saveJpdj(data1)
          this.fromState.id = resA.result.id
          this.$nextTick(() => {
            this.$refs.checkManModalRef.visible = true
            this.$refs.checkManModalRef.getData()
          })
        } else {
          this.$nextTick(() => {
            this.$refs.checkManModalRef.visible = true
            this.$refs.checkManModalRef.getData()
          })
        }
      },
      checkManFuntion(item){
        //console.log(item)
        if(item){
          let idList = []
          item.forEach(items => {
            idList.push(items.id)
          })
          sddjRymd({id:this.fromState.id,ids:idList.toString()}).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.dataTableConfig.paramet = {
                id: this.fromState.id
              }
              this.reCommpVxeTable = Date.now()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      },
      // 导出
      exportClick(fileTitle){
        let that = this
        that.$confirm({
          title: '当前数据全部导出，您确定要导出当前人员名单吗?',
          content: '',
          okText: '确定',
          okType: 'info',
          cancelText: '取消',
          onOk() {
            var fileName = fileTitle
            exportByJpdj({id: that.fromState.id}).then((data) => {
              if (!data) {
                  that.$message.warning('文件下载失败')
                  return
              }
              if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
              } else {
                  let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                  let link = document.createElement('a')
                  link.style.display = 'none'
                  link.href = url
                  link.setAttribute('download', fileName + '.xls')
                  document.body.appendChild(link)
                  link.click()
                  document.body.removeChild(link) //下载完成移除元素
                  window.URL.revokeObjectURL(url) //释放掉blob对象
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      // 删除
      deleteClick(){
        if(this.idList.length == 0){
          this.$message.warning('请勾选数据！')
          return
        }
        let that = this
        that.$confirm({
          title: '您确定要移出当前人员名单吗?',
          content: '',
          okText: '确定',
          okType: 'warning',
          cancelText: '取消',
          onOk() {
            jpdjBydelete({ids: that.idList.toString()}).then(res => {
              if(res.code == 200){
                that.$message.success(res.message)
                that.resetEvent()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      callback(key) {
        if(key == '2'){
          this.dataTableConfigLc.paramet.fjpjbxxid = this.fromState.id
          this.reCommpVxeTableLc = Date.now()
        }
      },
      resetEventXz(){
        this.dataTableConfigLc.paramet.fjpjbxxid = this.fromState.id
        this.reCommpVxeTableLc = Date.now()
      }
  },
}
</script>
<style lang="less">
.form-appointmentOfInspectorsModalDj-Lu {
    span {
        word-wrap:break-word;
        word-break:break-all;
        // white-space:normal;
    }
    p {
        word-wrap:break-word;
        word-break:break-all;
        white-space:normal;
    }
  .ant-modal {
    background-color: #5ca3e5;
    position: static;
    width: 100%;
    height: 100%;
    top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
  }
  .ant-modal-content {
    height: 100%;
  }
  .ant-modal-body {
    padding: 15px !important;
    background-color: white;
  }
  .ant-modal-wrap {
    background-color: white;
  }
  .ant-modal-footer {
    text-align: center !important;
    .ant-btn-primary {
      background-color: #5ca3e5 !important;
      border-color: #5ca3e5 !important;
    }
  }
  .ant-form-item {
    margin-bottom: 0px;
    textarea.ant-input {
        margin-bottom: 0px;
        height: 46px;
    }
  }
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    // text-align: center;
    // padding-top: 20px;
    overflow: scroll;
    height: calc(100vh - 175px);
  }

  .steps-action {
    margin-top: 10px;
    text-align: right;
  }
  .comp-select-box-a {
    line-height: 1;
  }
  .personal-info-form{
      .ant-form-item{
          margin: 5px 0;
      }
      .ant-form-item-label{
          width: 118px;
      }
      .flex-w-er{
          width: 590px;
          .ant-form-item-control-wrapper{
              width: calc(100% - 118px);
          }
      }
      .flex-w-san{
        // width: 885px;
        width: calc(100vw - 1180px);
        min-width: 865px;
        .ant-form-item-control-wrapper{
              width: calc(100% - 118px);
          }
      }
      .flex-w-row {
        width: 100%;
        .ant-form-item-control-wrapper{
              width: calc(100%);
          }
      }
      .flex-w-label {
        .ant-form-item-label{
            width: 250px;
        }
      }
  }
  .commpVxeTable-table {
    border: 1px solid #CCC;
    border-radius: 5px;
    // margin-top: 10px;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label {
    // background-color: red;
  }
  .ant-collapse > .ant-collapse-item {
    border-bottom: none !important;
  }
  //---
  .ant-descriptions-bordered .ant-descriptions-item-label{
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      background-color:#e6f7ff;
      width: 150px !important;
      text-align: right;
      font-size: 16px;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
      padding: 5px 10px !important;

  }
  .descriptions-dengji {
      .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 130px !important;//确保左侧固定文字不会换行
        line-height: 2;
        text-align: center;
        justify-content: center;
    }
    .descriptions-content-item {
      .ant-form-item-control-wrapper{
          width: 100%;
      }
    }
  }
  .descriptions-row .descriptions-label-slot{
      display: flex;
      align-items: center;
      width: 300px !important;//确保左侧固定文字不会换行
  }
  .xhText{

      color: #f5222d;
      line-height: 36px;
      font-size: 21px;
      font-weight: 600;
      height: 30px;
  }
  .descriptions-item-center{

  }
  .ant-form-inline .ant-form-item-with-help{
      margin-bottom: 0px !important;
  }
  .zm-form-model{
      display: flex;
      .ant-form-item-control-wrapper{
          flex: 1;
      }
  }
  .ant-descriptions-bordered .ant-descriptions-row{
      border-bottom: 1px solid #e4e3e3;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
      border-right: 1px solid #e4e3e3;
      line-height: 1;
      min-width: 100px;
      // padding: 16px 24px !important;
  }
  .ant-descriptions-bordered .ant-descriptions-view{
      border: 1px solid #e4e3e3;
      border-right: 0;
  }
  .ant-descriptions-row:last-child{
      border-bottom: 0;
  }
  .ant-collapse-header {
    width: auto !important;
  }
  .ant-descriptions-title {
    margin: 10px;
  }
  .view-descriptions {
    // .descriptions-content-item {
    //   .ant-form-item-control-wrapper{
    //     background-color: #5ca3e5;
    //       width: 100%;
    //   }
    // }
    th{
      line-height: 3 !important;
    }
  }
  .ant-tabs.ant-tabs-card {
    .ant-tabs-tab {
      font-size: 16px;
    }
    .ant-tabs-bar .ant-tabs-tab-active {
      background: #5ca3e5 !important;
      border-color: #5ca3e5 !important;
      color: #fff;
      font-size: 16px;
    }
    .ant-tabs-top-content{
      /* height: 83vh; */
      height: calc(100vh - 241px);
      overflow: scroll;
    }
  }
}
</style>
